<template>
	<view class="content">
		<!-- 电量显示栏 -->
		<view class="top_nav">
			<view class="kong"></view>
			<!-- <image src="/static/buy/1.png"></image> -->
			<view class="tab_item">
				<view class="return" @click="returnPage">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/jiantou.png"></image>
				</view>
				<view class="title">开通快捷支付</view>
				<view class="return"></view>
			</view>
		</view>
		<!-- 表单 -->
		<!-- accountName: "张嘉俊"
accountNo: "6214868710042713"
bankCode: "308584000013"
bankName: "招商银行"
certNo: "532129199201142713"
phone: "15284418805" -->
		<view class="form_wrap">
			<form @submit="formSubmit">
				<view class="input">
					<view class="input_wrap">
						<view class="input_name">手机号</view>
						<view class="input_box">
							<view class="ID_wrap">
								<view class="ID_input">
									<input type="number" disabled="true" @input="phones" :value="not_caed_array.phone"/>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="input">
					<view class="input_wrap">
						<view class="input_name">结算卡</view>
						<view class="input_box">
							<input disabled="true" name="brandcode" :value="not_caed_array.accountNo"/>
						</view>	
					</view>
				</view>
				<view class="input">
					<view class="input_wrap">
						<view class="input_name">姓名</view>
						<view class="input_box">
							<view class="select_wrap">
								<view class="select_con">{{not_caed_array.accountName}}</view>
								<view class="select_icon">
								</view>
							</view>
							
						</view>	
					</view>
				</view>
				<view class="input">
					<view class="input_wrap">
						<view class="input_name">身份证号</view>
						<view class="input_box">
							<input disabled="true" name="card_no" :value="not_caed_array.certNo"/>
						</view>	
					</view>
				</view>
				<view class="input">
					<view class="input_wrap">
						<view class="input_name">总行联行号</view>
						<view class="input_box">
							<input disabled="true" name="bank_no" :value="not_caed_array.bankCode"/>
						</view>	
					</view>
				</view>
				<view class="input">
					<view class="input_wrap">
						<view class="input_name">银行名称</view>
						<view class="input_box">
							<input disabled="true" name="bank_name" :value="not_caed_array.bankName"/>
						</view>	
					</view>
				</view>
				<!-- 显示弹框 -->
				<openAlert class='openAlert1' ref="openAlert1" BgColor='rgba(0, 0, 0, 0.7)' :AlertClass="AlertClass" :AlertPosition="AlertPosition">
					<view class="modal_wrap">
						<view class="modal_title">开通快捷支付</view>
						
						<view class="modal_content">
							<view class="con_item">是否开通快捷支付</view>
						</view>
						<view class="btn_wrap">
							<view class="cancel_btn" @click.stop="cancel">取消</view>
							<button class="modal_btns" form-type="submit">确认</button>
						</view>
					</view>
				</openAlert>
				<!-- <view class="btn" @tap="open1(0,'center')"> -->
					<button class="btn" @tap="open1(0,'center')">确认</button>
					
				<!-- </view> -->
			</form>
		</view>
		
		
	</view>
</template>

<script>
	 import openAlert from '@/components/open-alert/open-alert';
	export default {
		components:{openAlert},
		data() {
			return {
				//提交的数据
				AlertClass: 0,
				AlertPosition: '',
				//无卡开通页数据
				not_caed_array:{},
				token:''
			}
		},
		onShow() {
			
		},
		onLoad(option){
			this.token=option.token
			if(option.username&&option.phone&&option.agent_id){
				this.name = option.username
				this.phone = option.phone
				this.agent_id = option.agent_id
			}
			//调起无卡开通页数据
			this.get_Not_data()
			// this.choosedailiType()
		},
		methods: {
			//获取无卡开通页数据
			get_Not_data(){
				//获取五开支付开页数据
				let params = {
					token:this.token
				};
				var url = '/api/quickpay/register'
				this.Unfold_data.upload_data(params, 'GET', url, res => {
					if (res.statusCode == 200 && res.data.code == 1) {
						this.not_caed_array = res.data.data.registerInfo
					} else {
						// this.Unfold_data.showWindow(res.data.msg);
					}
				});
			},
			//关闭提示框
			cancel(){
				this.$nextTick(function() {
					this.$refs.openAlert1.Close();
				});
			},
			//打开提示框
			open1(Class, Position) {
			
				this.$nextTick(function() {
					this.AlertClass = Class;
					this.AlertPosition = Position;
					this.$nextTick(function() {
						// console.log(this.$refs)
						this.$refs.openAlert1.Show();
					});
				});
			},
			//选择设备
			// equipment(){
			// 	uni.navigateTo({
			// 		url:'/pages/equipment/equipment'
			// 	})
			// },
			//输入手机号码是获取姓名，数量，agent_id
			// phones(e){
			// 	if(!e.detail.value){
			// 		this.Unfold_data.showWindow('请输入手机号')
			// 	}else if(e.detail.value.length == 11){
			// 		let params = {
			// 			mobile:e.detail.value
			// 		};
			// 		var url = '/api/usercenter/userinvite/checkAgent'
			// 		this.Unfold_data.upload_data(params, 'GET', url, res => {
			// 			if (res.statusCode == 200 && res.data.code == 1) {
			// 				this.name =res.data.data.name
			// 				this.number =res.data.data.pos
			// 				this.agent_id = res.data.data.agent_id
			// 			} else {
			// 				this.Unfold_data.showWindow(res.data.msg);
			// 			}
			// 		});
			// 	}
			// },
			// //根据传入的值来查询添加代理的条件
			// add_agent(phone){
			// 	let params = {
			// 		mobile:phone
			// 	};
			// 	var url = '/api/usercenter/userinvite/checkAgent'
			// 	this.Unfold_data.upload_data(params, 'GET', url, res => {
			// 		console.log(res);
			// 		if (res.statusCode == 200 && res.data.code == 1) {
			// 			this.name =res.data.data.name
			// 			this.number =res.data.data.pos
			// 			this.agent_id = res.data.data.agent_id
			// 		} else {
			// 			this.Unfold_data.showWindow(res.data.msg);
			// 		}
			// 	});
			// },
			
			//反上一页
			returnPage(){
			    uni.navigateBack({
			     delta:1
			    })
			   },
			   //输入框赋值
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			//开通无卡支付
			formSubmit(e){
					
					// uni.showModal({
					//     title: '温馨提示',
					//     content: '是否将选择的设备划拨给'+this.name,
					//     success:(res) => {
					//         if (res.confirm) {
								let params = this.not_caed_array
								let param={
									params,
									token:this.token
								}
								uni.showLoading({
									title:'请稍等，正在为您处理',
									mask:true
								})
								var url = '/api/quickpay/register/save'
								this.Unfold_data.upload_data(param, 'POST', url, res => {
									if (res.statusCode == 200 && res.data.code == 1) {
										this.Unfold_data.showWindow(res.data.msg);
										if (res.data.code == 1) {
											setTimeout(function() {
												uni.hideLoading()
												uni.navigateTo({
													url: '/pages/Payment_without_card/Payment_without_card?token='+this.token
												});
											}, 1000);
										}
									} else {
										this.Unfold_data.showWindow(res.data.msg);
									}
								});
					//         } else if (res.cancel) {
								
					//         }
					//     }
					// });
			},
		}
	}
</script>

<style lang="scss">
	page{
			width: 100%;
			height: 100%;
			background: #282828;
		}
.content{
	width: 100%;
	position: relative;
	.top_nav{
		width: 100%;
		height: 200upx;
		background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/buy/1.png');
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.kong{
			width: 100%;
			height: 60upx;
		}
		.tab_item{
			width: 90%;
			margin: 0 auto;
			height: 140upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.return{
				flex: 1;
				width: 100%;
				image{
					width: 29upx;
					height: 29upx;
				}
			}
			.title{
				flex: 8;
				width: 100%;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
			}
		}
	}
	.truename_wrap{
		padding-top: 270upx;
		width: 100%;
		height: 250upx;
		background: #131415;
		border-top: 2upx solid #ededed;
		display: flex;
		align-items: center;
		justify-content: center;
		.mid_wrap{
			width: 80%;
			margin: 0 auto;
			height: 100upx;
			border: 2upx solid var(--themeColor);
			-webkit-background-clip: text;
			color: transparent;
			background-image: linear-gradient(left,#f6d2a1,#bd9a74);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 34upx;
			font-weight: bold;
		}
	}
	.form_wrap{
		width: 95%;
		margin: 0 auto;
		padding-top: 220upx;
		.input{
			width: 100%;
			height: 80upx;
			margin-top: 20upx;
			background: #41414d;
			.input_wrap{
				width: 95%;
				margin: 0 auto;
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: center;
				.input_name{
					flex: 1;
					color: var(--themeColor);
				}
				.input_box{
					flex: 2;
					text-align: right;
					padding-left: 10upx;
					.image{
						width: 25upx;
						height: 25upx;
					}
					input{
						color: #7c7c7c;
					}
					.select_wrap{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						.select_con{
							color: #7c7c7c;
						}
						.select_icon{
							padding-left: 10upx;
							.image{
								width: 25upx;
								height: 25upx;
							}
						}
					}
					.ID_wrap{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						.ID_input{
							input{
								
							}
						}
						.input_img{
							padding-left: 10upx;
							image{
								width: 41upx;
								height: 37upx;
							}
						}
					}
				}
			}
		}
		.openAlert1{
			width: 100%;
			.modal_wrap{
				width: 75vw;
				height: 350upx;
				background-color: #FFFFFF;
				border-radius: 20upx;
				.modal_title{
					width: 100%;
					height: 80upx;
					// background: #f0deb5;
					background: linear-gradient(#f0deb5,#a88950); /* 标准语法 */
					border-radius: 20upx 20upx 0 0;
					color: #000000;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				.modal_content{
					width: 70%;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 40upx 0;
					.con_item{
						text-align: center;
						font-size: 30upx;
					}
				}
				
				.btn_wrap{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					.cancel_btn{
						width: 200upx;
						margin: 0 auto;
						height: 60upx;
						margin-top: 20upx;
						border: 2upx solid #f0deb5;
						color: #000000;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.modal_btns{
						width: 200upx;
						margin: 0 auto;
						height: 60upx;
						margin-top: 20upx;
						background: linear-gradient(top,#f0deb5,#a88950);
						color: #000000;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				
			}
		}
		.yanzhenma_wrap{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 80upx;
			margin-top: 20upx;
			background: #41414d;
			.yanzhenma {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				.input-item {
					flex: 3;
					display: flex;
					// flex-direction: column;
					align-items: center;
					justify-content: center;
					height: 80upx;
					background: #41414d;
					border-radius: 4px;
					// margin-bottom: 50upx;
					&:last-child {
						margin-bottom: 0;
					}
					.tit {
						flex: 1;
						font-size: $font-sm + 2upx;
						color: var(--themeColor);
						padding-left: 20upx;
					}
					input {
						flex: 3;
						height: 60upx;
						font-size: $font-base + 2upx;
						color: #7c7c7c;
						width: 100%;
					}
				}
				.confirm-btn_wrap{
					flex: 1;
					.confirm-btn11 {
						background-color: var(--themeColor);
						width: 180upx;
						height: 60upx;
						border-radius: 50upx;
						text-align: center;
						line-height: 60upx;
						font-size: 24upx;
					}
				}
			}
		}
		
		.upload_img{
			width: 100%;
			height: 350upx;
			margin-top: 20upx;
			background: #41414d;
			display: flex;
			align-items: center;
			.upload_wrap{
				width: 95%;
				margin: 0 auto;
				.upload_title{
					color: var(--themeColor);
					margin-bottom: 20upx;
				}
				.img_wrap{
					display: flex;
					align-items: center;
					justify-content: center;
					.img_left{
						width: 301upx;
						height: 186upx;
						position: relative;
						margin-right: 20upx;
						image{
							width: 301upx;
							height: 186upx;
						}
						.img_text{
							width: 240upx;
							position: absolute;
							bottom: 10upx;
							left: 50%;
							transform: translateX(-50%);
							font-size: 26upx;
							color: #FFFFFF;
						}
					}
					.img_right{
						width: 301upx;
						height: 186upx;
						position: relative;
						margin-left: 20upx;
						image{
							width: 301upx;
							height: 186upx;
						}
						.img_text{
							width: 240upx;
							position: absolute;
							bottom: 10upx;
							left: 50%;
							transform: translateX(-50%);
							font-size: 26upx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
		.uni-list-cell{
			width: 100%;
			height: 80upx;
			margin-top: 20upx;
			padding: 0 20upx;
			background: #41414d;
			display: flex;
			align-items: center;
			.uni-list-cell-db{
				flex: 1;
				color: var(--themeColor);
			}
			.switch{
				flex: 1;
				text-align: right;
			}
		}
		.upload_tishi{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 20upx;
			.tishi_con{
				color: var(--themeColor);
				font-size: 20upx;
			}
		}
	}
	.sureXieyi{
		width: 100%;
		margin: 20upx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.choose_box{
			
		}
		.choose_con{
			color: #FFFFFF;
			text{
				color: var(--themeColor);
			}
		}
	}
	.btn{
		width: 100%;
		height: 90upx;
		border-radius: 45upx;
		background: linear-gradient(left,#eecf9b,#b8965c);
		margin-top: 60upx;
		font-weight: bold;
		.button{
			background: none;
			border: none;
		}
	}
}
</style>
